<template>
  <router-link :to="'/recommend/recInfo?id=' + item.id" class="item">
    <div class="img">
      <img :src="item.picUrl" />
      <span class="playCount">{{ item.playCount | formatNum }}</span>
    </div>
    <p class="name">{{ item.name }}</p>
  </router-link>
</template>
<script>
export default {
  props: {
    item: Object,
  },
  filters: {
    formatNum(value) {
      return value > 100000000
        ? (value / 100000000).toFixed(0) + "亿"
        : value > 10000
        ? (value / 10000).toFixed(1).replace(/\.0$/, "") + "万"
        : value;
    },
  },
};
</script>
<style lang="less" scoped>
.item {
  width: 33.3%;
  padding: 0 1px;
  box-sizing: border-box;
  margin-bottom: 16px;
  color: inherit;
  .img {
    position: relative;
    padding-bottom: 100%;
    border-radius: 1.867vw;
    overflow: hidden;
    img {
      position: absolute;
      width: 100%;
      left: 0;
      top: 0;
      z-index: 1;
    }
    .playCount {
      position: absolute;
      right: 5px;
      top: 2px;
      z-index: 3;
      padding-left: 13px;
      color: #fff;
      font-size: 12px;
      text-shadow: 1px 0 0 rgba(0, 0, 0, 0.15);
      background-position: 0;
      background-size: 11px 10px;
      background-repeat: no-repeat;
      background-image: url();
    }
    &::after {
      content: " ";
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 20px;
      z-index: 2;
      background-image: -webkit-linear-gradient(
        top,
        rgba(0, 0, 0, 0.2),
        rgba(0, 0, 0, 0)
      );
      background-image: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.2),
        rgba(0, 0, 0, 0)
      );
    }
  }
  .name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding: 6px 2px 0 6px;
    min-height: 30px;
    line-height: 1.2;
    font-size: 13px;
    word-break: break-all;
  }
}
</style>